<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>webpack基础 | donyyang blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="Webpack &amp;#x672C;&amp;#x8EAB;&amp;#x53EA;&amp;#x80FD;&amp;#x5904;&amp;#x7406; JavaScript &amp;#x6A21;&amp;#x5757;,&amp;#x57FA;&amp;#x7840;&amp;#x7684;webpack&amp;#x5927;&amp;#x6982;&amp;#x5206;&amp;#x4E3A;entry,output,moudle,plugins,&amp;#x5177;&amp;#x4F53;&amp;#x4E3A;">
<meta property="og:type" content="article">
<meta property="og:title" content="webpack基础">
<meta property="og:url" content="http://yoursite.com/2016/08/24/webpack的基本用法/index.html">
<meta property="og:site_name" content="donyyang blog">
<meta property="og:description" content="Webpack &amp;#x672C;&amp;#x8EAB;&amp;#x53EA;&amp;#x80FD;&amp;#x5904;&amp;#x7406; JavaScript &amp;#x6A21;&amp;#x5757;,&amp;#x57FA;&amp;#x7840;&amp;#x7684;webpack&amp;#x5927;&amp;#x6982;&amp;#x5206;&amp;#x4E3A;entry,output,moudle,plugins,&amp;#x5177;&amp;#x4F53;&amp;#x4E3A;">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2016-08-25T15:47:36.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="webpack基础">
<meta name="twitter:description" content="Webpack &amp;#x672C;&amp;#x8EAB;&amp;#x53EA;&amp;#x80FD;&amp;#x5904;&amp;#x7406; JavaScript &amp;#x6A21;&amp;#x5757;,&amp;#x57FA;&amp;#x7840;&amp;#x7684;webpack&amp;#x5927;&amp;#x6982;&amp;#x5206;&amp;#x4E3A;entry,output,moudle,plugins,&amp;#x5177;&amp;#x4F53;&amp;#x4E3A;">
  
    <link rel="alternative" href="/atom.xml" title="donyyang blog" type="application/atom+xml">
  
  
    <link rel="icon" href="/img/body.jpeg">
  
  
      <link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css">
  
  
      <link href="//cdn.bootcss.com/jqueryui/1.10.4/css/jquery-ui.min.css" rel="stylesheet">
  
  <link rel="stylesheet" href="/css/style.css">
  
  <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  
  
    <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  
  <script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
  <script>
      var yiliaConfig = {
          fancybox: true,
          animate: true,
          isHome: false,
          isPost: true,
          isArchive: false,
          isTag: false,
          isCategory: false,
          open_in_new: false,
      }
  </script>

  
      <script>
          yiliaConfig.rootUrl = "/";
      </script>
  

  
</head>
<body>
  <div id="container">
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
    <header id="header" class="inner">
        <a href="/" class="profilepic">
            <img src="/img/body.jpeg" class="animated zoomIn">
        </a>
        <hgroup>
          <h1 class="header-author"><a href="/">donyyang</a></h1>
        </hgroup>

        
                


        
            <div id="switch-btn" class="switch-btn">
                <div class="icon">
                    <div class="icon-ctn">
                        <div class="icon-wrap icon-house" data-idx="0">
                            <div class="birdhouse"></div>
                            <div class="birdhouse_holes"></div>
                        </div>
                        <div class="icon-wrap icon-ribbon hide" data-idx="1">
                            <div class="ribbon"></div>
                        </div>
                        
                        <div class="icon-wrap icon-link hide" data-idx="2">
                            <div class="loopback_l"></div>
                            <div class="loopback_r"></div>
                        </div>
                        
                        
                        <div class="icon-wrap icon-me hide" data-idx="3">
                            <div class="user"></div>
                            <div class="shoulder"></div>
                        </div>
                        
                    </div>
                    
                </div>
                <div class="tips-box hide">
                    <div class="tips-arrow"></div>
                    <ul class="tips-inner">
                        <li>菜单</li>
                        <li>标签</li>
                        
                        <li>友情链接</li>
                        
                        
                        <li>关于我</li>
                        
                    </ul>
                </div>
            </div>
        

        <div id="switch-area" class="switch-area">
            <div class="switch-wrap">
                <section class="switch-part switch-part1">
                    <nav class="header-menu">
                        <ul>
                        
                            <li><a href="/">主页</a></li>
                        
                            <li><a href="/archives/">所有文章</a></li>
                        
                            <li><a href="/tags/">标签云</a></li>
                        
                            <li><a href="/about/">关于我</a></li>
                        
                        </ul>
                    </nav>
                    <nav class="header-nav">
                        <ul class="social">
                            
                                <li id="Email"><a class="Email" target="_blank" href="mailto:123@123.com" title="Email"></a></li>
                            
                                <li id="GitHub"><a class="GitHub" target="_blank" href="#" title="GitHub"></a></li>
                            
                                <li id="RSS"><a class="RSS" target="_blank" href="/atom.xml" title="RSS"></a></li>
                            
                        </ul>
                    </nav>
                </section>
                
                
                <section class="switch-part switch-part2">
                    <div class="widget tagcloud" id="js-tagcloud">
                        
                    </div>
                </section>
                
                
                
                <section class="switch-part switch-part3">
                    <div id="js-friends">
                    
                      <a target="_blank" class="main-nav-link switch-friends-link" href="https://hexo.io">Hexo</a>
                    
                      <a target="_blank" class="main-nav-link switch-friends-link" href="https://pages.github.com/">GitHub</a>
                    
                      <a target="_blank" class="main-nav-link switch-friends-link" href="http://moxfive.xyz/">MOxFIVE</a>
                    
                    </div>
                </section>
                

                
                
                <section class="switch-part switch-part4">
                
                    <div id="js-aboutme">陌上人如玉，公子世无双</div>
                </section>
                
            </div>
        </div>
    </header>                
</div>
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
      <div class="overlay">
          <div class="slider-trigger"></div>
          <h1 class="header-author js-mobile-header hide"><a href="/" title="回到主页">donyyang</a></h1>
      </div>
    <div class="intrude-less">
        <header id="header" class="inner">
            <a href="/" class="profilepic">
                <img src="/img/body.jpeg" class="animated zoomIn">
            </a>
            <hgroup>
              <h1 class="header-author"><a href="/" title="回到主页">donyyang</a></h1>
            </hgroup>
            
            <nav class="header-menu">
                <ul>
                
                    <li><a href="/">主页</a></li>
                
                    <li><a href="/archives/">所有文章</a></li>
                
                    <li><a href="/tags/">标签云</a></li>
                
                    <li><a href="/about/">关于我</a></li>
                
                <div class="clearfix"></div>
                </ul>
            </nav>
            <nav class="header-nav">
                        <ul class="social">
                            
                                <li id="Email"><a class="Email" target="_blank" href="mailto:123@123.com" title="Email"></a></li>
                            
                                <li id="GitHub"><a class="GitHub" target="_blank" href="#" title="GitHub"></a></li>
                            
                                <li id="RSS"><a class="RSS" target="_blank" href="/atom.xml" title="RSS"></a></li>
                            
                        </ul>
            </nav>
        </header>                
    </div>
</nav>
      <div class="body-wrap"><article id="post-webpack的基本用法" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2016/08/24/webpack的基本用法/" class="article-date">
      <time datetime="2016-08-24T08:41:46.000Z" itemprop="datePublished">2016-08-24</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      webpack基础
    </h1>
  

      </header>
      
      <div class="article-info article-info-post">
        

        
        <div class="clearfix"></div>
      </div>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
        <p>Webpack &#x672C;&#x8EAB;&#x53EA;&#x80FD;&#x5904;&#x7406; JavaScript &#x6A21;&#x5757;,&#x57FA;&#x7840;&#x7684;webpack&#x5927;&#x6982;&#x5206;&#x4E3A;entry,output,moudle,plugins,&#x5177;&#x4F53;&#x4E3A;<br><a id="more"></a></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">&quot;webpack&quot;</span>),</span><br><span class="line">      path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = {</span><br><span class="line">    entry: {},    <span class="comment">//&#x5165;&#x53E3;&#x6587;&#x4EF6;</span></span><br><span class="line">    output: {},   <span class="comment">//&#x6253;&#x5305;&#x540E;&#x7684;&#x51FA;&#x53E3;&#x6587;&#x4EF6;</span></span><br><span class="line">    <span class="built_in">module</span>: {},   <span class="comment">//&#x9700;&#x8981;&#x7684;&#x914D;&#x7F6E;</span></span><br><span class="line">    plugins:[],   <span class="comment">//&#x9700;&#x8981;&#x7684;&#x63D2;&#x4EF6;</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>&#x9879;&#x76EE;&#x4E2D;&#x5F15;&#x7528;atool-build&#x540E;webpack&#x7684;&#x57FA;&#x672C;&#x529F;&#x80FD;&#x90FD;&#x53EF;&#x4EE5;&#x5B9E;&#x73B0;&#xFF0C;&#x5982;&#x679C;&#x60F3;&#x5BF9;&#x5176;&#x8FDB;&#x884C;&#x6269;&#x5C55;&#xFF0C;&#x53EF;&#x5199;&#x5728;<br>webpack.config.js&#x4E2D;&#x3002;atool-build&#x7684;webpack&#x914D;&#x7F6E;<a href="https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js" target="_blank" rel="noopener">getWebpackCommonConfig.js</a>  </p>
<h2 id="&#x8DDF;webpack&#x5206;&#x4E0D;&#x5F00;&#x7684;package-json&#x3002;&#x5F53;&#x5B89;&#x88C5;&#x5404;&#x79CD;npm-&#x4F9D;&#x8D56;&#x5305;&#x7684;&#x65F6;&#x5019;&#x4F1A;&#x6709;&#x4E24;&#x79CD;&#x5199;&#x6CD5;"><a href="#&#x8DDF;webpack&#x5206;&#x4E0D;&#x5F00;&#x7684;package-json&#x3002;&#x5F53;&#x5B89;&#x88C5;&#x5404;&#x79CD;npm-&#x4F9D;&#x8D56;&#x5305;&#x7684;&#x65F6;&#x5019;&#x4F1A;&#x6709;&#x4E24;&#x79CD;&#x5199;&#x6CD5;" class="headerlink" title="&#x8DDF;webpack&#x5206;&#x4E0D;&#x5F00;&#x7684;package.json&#x3002;&#x5F53;&#x5B89;&#x88C5;&#x5404;&#x79CD;npm &#x4F9D;&#x8D56;&#x5305;&#x7684;&#x65F6;&#x5019;&#x4F1A;&#x6709;&#x4E24;&#x79CD;&#x5199;&#x6CD5;:"></a>&#x8DDF;webpack&#x5206;&#x4E0D;&#x5F00;&#x7684;package.json&#x3002;&#x5F53;&#x5B89;&#x88C5;&#x5404;&#x79CD;npm &#x4F9D;&#x8D56;&#x5305;&#x7684;&#x65F6;&#x5019;&#x4F1A;&#x6709;&#x4E24;&#x79CD;&#x5199;&#x6CD5;:</h2><p>-save&#x548C;save-dev&#x53EF;&#x4EE5;&#x7701;&#x6389;&#x4F60;&#x624B;&#x52A8;&#x4FEE;&#x6539;package.json&#x6587;&#x4EF6;&#x7684;&#x6B65;&#x9AA4;&#x3002;<br>npm install module-name -save &#x81EA;&#x52A8;&#x628A;&#x6A21;&#x5757;&#x548C;&#x7248;&#x672C;&#x53F7;&#x6DFB;&#x52A0;&#x5230;dependencies&#x90E8;&#x5206;<br>npm install module-name -save-dve &#x81EA;&#x52A8;&#x628A;&#x6A21;&#x5757;&#x548C;&#x7248;&#x672C;&#x53F7;&#x6DFB;&#x52A0;&#x5230;devdependencies&#x90E8;&#x5206;</p>
<p>&#x81F3;&#x4E8E;&#x914D;&#x7F6E;&#x6587;&#x4EF6;&#x533A;&#x5206;&#x8FD9;&#x4FE9;&#x90E8;&#x5206;&#xFF0C; &#x662F;&#x7528;&#x4E8E;&#x533A;&#x522B;&#x5F00;&#x53D1;&#x4F9D;&#x8D56;&#x6A21;&#x5757;&#x548C;&#x4EA7;&#x54C1;&#x4F9D;&#x8D56;&#x6A21;&#x5757;</p>
<h2 id="entry&#x4E2D;&#x586B;&#x5165;&#x9700;&#x8981;&#x6253;&#x5305;&#x7684;js-&#x6587;&#x4EF6;&#xFF0C;&#x53EF;&#x6307;&#x5B9A;&#x591A;&#x4E2A;&#x6587;&#x4EF6;"><a href="#entry&#x4E2D;&#x586B;&#x5165;&#x9700;&#x8981;&#x6253;&#x5305;&#x7684;js-&#x6587;&#x4EF6;&#xFF0C;&#x53EF;&#x6307;&#x5B9A;&#x591A;&#x4E2A;&#x6587;&#x4EF6;" class="headerlink" title="entry&#x4E2D;&#x586B;&#x5165;&#x9700;&#x8981;&#x6253;&#x5305;&#x7684;js &#x6587;&#x4EF6;&#xFF0C;&#x53EF;&#x6307;&#x5B9A;&#x591A;&#x4E2A;&#x6587;&#x4EF6;."></a>entry&#x4E2D;&#x586B;&#x5165;&#x9700;&#x8981;&#x6253;&#x5305;&#x7684;js &#x6587;&#x4EF6;&#xFF0C;&#x53EF;&#x6307;&#x5B9A;&#x591A;&#x4E2A;&#x6587;&#x4EF6;.</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">entry: {</span><br><span class="line">        a: __dirname + <span class="string">&quot;/a&quot;</span>,</span><br><span class="line">        b: __dirname + <span class="string">&quot;/b&quot;</span>,</span><br><span class="line">        c: [__dirname + <span class="string">&quot;/c&quot;</span>, __dirname + <span class="string">&quot;/d&quot;</span>]</span><br><span class="line">    },</span><br></pre></td></tr></table></figure>
<p>__dirname &#x662F;node.js&#x4E2D;&#x7684;&#x4E00;&#x4E2A;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#xFF0C;&#x5B83;&#x6307;&#x5411;&#x5F53;&#x524D;&#x6267;&#x884C;&#x811A;&#x672C;&#x6240;&#x5728;&#x7684;&#x76EE;&#x5F55;&#x3002;</p>
<h2 id="output&#x4E2D;&#x662F;&#x6253;&#x5305;&#x540E;&#x8F93;&#x51FA;&#x7684;js&#x6587;&#x4EF6;&#xFF0C;&#x4E5F;&#x662F;&#x4E3B;&#x9875;&#x9762;&#x4E2D;&#x6240;&#x4F9D;&#x8D56;&#x7684;js&#x6587;&#x4EF6;&#x3002;"><a href="#output&#x4E2D;&#x662F;&#x6253;&#x5305;&#x540E;&#x8F93;&#x51FA;&#x7684;js&#x6587;&#x4EF6;&#xFF0C;&#x4E5F;&#x662F;&#x4E3B;&#x9875;&#x9762;&#x4E2D;&#x6240;&#x4F9D;&#x8D56;&#x7684;js&#x6587;&#x4EF6;&#x3002;" class="headerlink" title="output&#x4E2D;&#x662F;&#x6253;&#x5305;&#x540E;&#x8F93;&#x51FA;&#x7684;js&#x6587;&#x4EF6;&#xFF0C;&#x4E5F;&#x662F;&#x4E3B;&#x9875;&#x9762;&#x4E2D;&#x6240;&#x4F9D;&#x8D56;&#x7684;js&#x6587;&#x4EF6;&#x3002;"></a>output&#x4E2D;&#x662F;&#x6253;&#x5305;&#x540E;&#x8F93;&#x51FA;&#x7684;js&#x6587;&#x4EF6;&#xFF0C;&#x4E5F;&#x662F;&#x4E3B;&#x9875;&#x9762;&#x4E2D;&#x6240;&#x4F9D;&#x8D56;&#x7684;js&#x6587;&#x4EF6;&#x3002;</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">output: {</span><br><span class="line">    path: path.join(__dirname, <span class="string">&apos;/public&apos;</span>),</span><br><span class="line">    filename:<span class="string">&apos;[name].js&apos;</span>,  <span class="comment">//&#x8F93;&#x5165;&#x7684;js&#x8DDF;&#x8F93;&#x51FA;&#x7684;js&#x540C;&#x540D;&#xFF0C;&#xFF0C;[name]-[hash].js&#x8F93;&#x51FA;&#x7684;&#x662F;main-&#x4E00;&#x4E2A;&#x968F;&#x673A;&#x503C;&#xFF0C;</span></span><br><span class="line">  },</span><br></pre></td></tr></table></figure>
<h2 id="resolve-&#x7701;&#x7565;&#x540E;&#x7F00;-&#x5F53;&#x5F15;&#x5165;js&#x7684;&#x65F6;&#x5019;&#x53EF;&#x7701;&#x7565;&#xFF0C;&#xFF0C;import-react-from-&#x2018;react&#x2019;"><a href="#resolve-&#x7701;&#x7565;&#x540E;&#x7F00;-&#x5F53;&#x5F15;&#x5165;js&#x7684;&#x65F6;&#x5019;&#x53EF;&#x7701;&#x7565;&#xFF0C;&#xFF0C;import-react-from-&#x2018;react&#x2019;" class="headerlink" title="resolve &#x7701;&#x7565;&#x540E;&#x7F00;,&#x5F53;&#x5F15;&#x5165;js&#x7684;&#x65F6;&#x5019;&#x53EF;&#x7701;&#x7565;&#xFF0C;&#xFF0C;import react from &#x2018;react&#x2019;;"></a>resolve &#x7701;&#x7565;&#x540E;&#x7F00;,&#x5F53;&#x5F15;&#x5165;js&#x7684;&#x65F6;&#x5019;&#x53EF;&#x7701;&#x7565;&#xFF0C;&#xFF0C;import react from &#x2018;react&#x2019;;</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">resolve:{</span><br><span class="line">      extensions:[<span class="string">&apos;&apos;</span>,<span class="string">&apos;.js&apos;</span>,<span class="string">&apos;.jsx&apos;</span>,<span class="string">&apos;.json&apos;</span>, <span class="string">&apos;.css&apos;</span>]</span><br><span class="line">  },</span><br></pre></td></tr></table></figure>
<h2 id="module-&#x52A0;&#x8F7D;&#x5668;&#x914D;&#x7F6E;&#xFF0C;&#x56E0;&#x4E3A;webpack-&#x672C;&#x8EAB;&#x53EA;&#x652F;&#x6301;&#x5BF9;js&#x8FDB;&#x884C;&#x5904;&#x7406;&#x3002;&#x5BF9;&#x5176;&#x4ED6;&#x6587;&#x4EF6;&#x8FDB;&#x884C;&#x5904;&#x7406;&#x5C31;&#x5728;&#x52A0;&#x8F7D;&#x5668;&#x4E2D;&#x8FDB;&#x884C;&#x914D;&#x7F6E;"><a href="#module-&#x52A0;&#x8F7D;&#x5668;&#x914D;&#x7F6E;&#xFF0C;&#x56E0;&#x4E3A;webpack-&#x672C;&#x8EAB;&#x53EA;&#x652F;&#x6301;&#x5BF9;js&#x8FDB;&#x884C;&#x5904;&#x7406;&#x3002;&#x5BF9;&#x5176;&#x4ED6;&#x6587;&#x4EF6;&#x8FDB;&#x884C;&#x5904;&#x7406;&#x5C31;&#x5728;&#x52A0;&#x8F7D;&#x5668;&#x4E2D;&#x8FDB;&#x884C;&#x914D;&#x7F6E;" class="headerlink" title="module &#x52A0;&#x8F7D;&#x5668;&#x914D;&#x7F6E;&#xFF0C;&#x56E0;&#x4E3A;webpack &#x672C;&#x8EAB;&#x53EA;&#x652F;&#x6301;&#x5BF9;js&#x8FDB;&#x884C;&#x5904;&#x7406;&#x3002;&#x5BF9;&#x5176;&#x4ED6;&#x6587;&#x4EF6;&#x8FDB;&#x884C;&#x5904;&#x7406;&#x5C31;&#x5728;&#x52A0;&#x8F7D;&#x5668;&#x4E2D;&#x8FDB;&#x884C;&#x914D;&#x7F6E;"></a>module &#x52A0;&#x8F7D;&#x5668;&#x914D;&#x7F6E;&#xFF0C;&#x56E0;&#x4E3A;webpack &#x672C;&#x8EAB;&#x53EA;&#x652F;&#x6301;&#x5BF9;js&#x8FDB;&#x884C;&#x5904;&#x7406;&#x3002;&#x5BF9;&#x5176;&#x4ED6;&#x6587;&#x4EF6;&#x8FDB;&#x884C;&#x5904;&#x7406;&#x5C31;&#x5728;&#x52A0;&#x8F7D;&#x5668;&#x4E2D;&#x8FDB;&#x884C;&#x914D;&#x7F6E;</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="built_in">module</span>: {</span><br><span class="line">    loaders: [</span><br><span class="line">      {</span><br><span class="line">        test:<span class="regexp">/\.js|jsx$/</span>,   </span><br><span class="line">        exclude:<span class="regexp">/node_modules/</span>,    <span class="comment">//&#x624B;&#x52A8;&#x6DFB;&#x52A0;&#x5FC5;&#x987B;&#x5904;&#x7406;&#x7684;&#x6587;&#x4EF6;&#xFF08;&#x6587;&#x4EF6;&#x5939;&#xFF09;&#x6216;&#x5C4F;&#x853D;&#x4E0D;&#x9700;&#x8981;&#x5904;&#x7406;&#x7684;&#x6587;&#x4EF6;&#xFF08;&#x6587;&#x4EF6;&#x5939;&#xFF09;</span></span><br><span class="line">        loaders: [<span class="string">&apos;react-hot&apos;</span>, <span class="string">&apos;babel&apos;</span>]</span><br><span class="line">        <span class="comment">// query:{   //&#x5C06;&#x5176;&#x5199;&#x5728;&#x4E86;.babelrc&#x91CC;&#x9762;</span></span><br><span class="line">        <span class="comment">//   presets:[&apos;es2015&apos;,&apos;react&apos;]  //&#x4E3A;loaders&#x63D0;&#x4F9B;&#x989D;&#x5916;&#x7684;&#x8BBE;&#x7F6E;&#x9009;&#x9879;</span></span><br><span class="line">        <span class="comment">// }</span></span><br><span class="line">      },</span><br><span class="line">      {</span><br><span class="line">        test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">        loader:ExtractTextPlugin.extract(<span class="string">&apos;style-loader?moudle&apos;</span>,<span class="string">&apos;css-loader?moudle&apos;</span>),   <span class="comment">//css-moudles  &#x5728;&#x7C7B;&#x540E;&#x9762;&#x968F;&#x673A;&#x52A0;&#x4E0A;&#x4E00;&#x6570;&#xFF0C;&#x4FDD;&#x8BC1;&#x4E0D;&#x91CD;&#x590D;,&#x8FD9;&#x6837;&#x5199;&apos;style!css!less&apos;&#x4F1A;&#x51FA;&#x9519;&#xFF0C;&#xFF0C;&#xFF0C;</span></span><br><span class="line">      },</span><br><span class="line">      {</span><br><span class="line">        test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        loader: ExtractTextPlugin.extract(<span class="string">&apos;style-loader?moudle&apos;</span>,<span class="string">&apos;css-loader?moudle&apos;</span>,<span class="string">&apos;less-loader?moudles&apos;</span>),</span><br><span class="line">      },</span><br><span class="line">      {</span><br><span class="line">        test: <span class="regexp">/\.scss$/</span>,</span><br><span class="line">        loader: <span class="string">&apos;style!css!scss&apos;</span></span><br><span class="line">      },</span><br><span class="line">      {<span class="attr">test</span>: <span class="regexp">/\.(jpg|png)$/</span>, <span class="attr">loader</span>: <span class="string">&quot;file-loader?name=[hash:8].[name].[ext]&quot;</span>},</span><br><span class="line">      <span class="comment">// &#x4E0D;&#x5927;&#x4E0E;25kb&#x7684;&#x65F6;&#x5019;</span></span><br><span class="line">      <span class="comment">// {</span></span><br><span class="line">      <span class="comment">//   test: /\.(png|jpg)$/,</span></span><br><span class="line">      <span class="comment">//   loader: &apos;url?limit=25000&apos;</span></span><br><span class="line">      <span class="comment">// }</span></span><br><span class="line">    ],</span><br><span class="line">  },</span><br></pre></td></tr></table></figure>
<p>test&#x6B63;&#x5219;&#x5339;&#x914D;&#x6587;&#x4EF6;&#x540E;&#x7F00;&#xFF0C;&#x6BD4;&#x5982;&#xFF40;test: /.scss$/&#xFF40;&#xFF0C;&#x5982;&#x679C;&#x5339;&#x914D;&#x5230;&#x6587;&#x4EF6;&#x540E;&#x7F00;&#x65F6;scss&#xFF0C;&#x5C31;&#x7528;&#xFF40;loader&#xFF40;&#x91CC;&#x9762;&#x7684;&#x52A0;&#x8F7D;&#x5668;&#x8FDB;&#x884C;&#x5904;&#x7406;&#x3002;&#xFF40;style!css!scss&#xFF40;&#x8FD9;&#x79CD;&#x5199;&#x6CD5;&#x662F;&#x5BF9;&#x8FD0;&#x7528;&#x591A;&#x4E2A;&#x52A0;&#x8F7D;&#x5668;&#x65F6;&#x7684;&#x7B80;&#x5199;&#xFF0C;&#x5BF9;&#x5E94;&#xFF40;&#x2019;style-loader&#x2019;,&#x2019;scss-loader&#x2019;,,&#x987A;&#x5E8F;&#x662F;&#x4ECE;&#x53F3;&#x5230;&#x5DE6;&#x4F9D;&#x6B21;&#x7528;&#x52A0;&#x8F7D;&#x5668;&#x8FDB;&#x884C;&#x5904;&#x7406;&#x3002;&#x2019;css-loader&#x2019;,&#x2019;scss-loader&#x2019;&#xFF40;,&#x987A;&#x5E8F;&#x662F;&#x4ECE;&#x53F3;&#x5230;&#x5DE6;&#x4F9D;&#x6B21;&#x7528;&#x52A0;&#x8F7D;&#x5668;&#x8FDB;&#x884C;&#x5904;&#x7406;&#x3002;</p>
<h2 id="plugins-&#x63D2;&#x4EF6;&#x9879;"><a href="#plugins-&#x63D2;&#x4EF6;&#x9879;" class="headerlink" title="plugins &#x63D2;&#x4EF6;&#x9879;"></a>plugins &#x63D2;&#x4EF6;&#x9879;</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">plugins: [</span><br><span class="line">    <span class="comment">// &#x70ED;&#x52A0;&#x8F7D;&#x63D2;&#x4EF6;</span></span><br><span class="line">    <span class="keyword">new</span> webpack.HotModuleReplacementPlugin(),</span><br><span class="line">    <span class="keyword">new</span> webpack.BannerPlugin(<span class="string">&quot;this is create by dony&quot;</span>),  <span class="comment">//js&#x4E0A;&#x9762;&#x6DFB;&#x52A0;&#x6CE8;&#x91CA;&#x7684;&#x63D2;&#x4EF6;</span></span><br><span class="line">    <span class="comment">// new webpack.optimize.UglifyJsPlugin(),   //&#x538B;&#x7F29;&#x4EE3;&#x7801;</span></span><br><span class="line">    <span class="keyword">new</span> ExtractTextPlugin(<span class="string">&quot;style.css&quot;</span>),<span class="comment">//&#x6837;&#x5F0F;&#x4E0E;js&#x5206;&#x79BB;</span></span><br><span class="line">    <span class="keyword">new</span> webpack.optimize.CommonsChunkPlugin(<span class="string">&apos;vendors&apos;</span>, <span class="string">&apos;vendors.js&apos;</span>),</span><br><span class="line">  ],</span><br></pre></td></tr></table></figure>
<p>&#x8FD0;&#x7528;&#x70ED;&#x52A0;&#x8F7D;&#x540E;&#x6539;&#x53D8;entry&#x4E2D;&#x7684;&#x5199;&#x6CD5;</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">entry:{<span class="attr">app</span>:[</span><br><span class="line">      <span class="string">&apos;webpack/hot/dev-server&apos;</span>,</span><br><span class="line">      <span class="string">&apos;webpack/hot/only-dev-server&apos;</span>,</span><br><span class="line">       __dirname + <span class="string">&apos;/app/main.js&apos;</span></span><br><span class="line">     ],</span><br><span class="line">      <span class="comment">// &#x5F53; React &#x4F5C;&#x4E3A;&#x4E00;&#x4E2A; node &#x6A21;&#x5757;&#x5B89;&#x88C5;&#x7684;&#x65F6;&#x5019;&#xFF0C;</span></span><br><span class="line">    <span class="comment">// &#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x6307;&#x5411;&#x5B83;&#xFF0C;&#x5C31;&#x6BD4;&#x5982; require(&apos;react&apos;)</span></span><br><span class="line">    vendors: [<span class="string">&apos;react&apos;</span>],</span><br><span class="line">    },</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">devServer: {</span><br><span class="line">    contentBase: __dirname + <span class="string">&quot;/public&quot;</span>,<span class="comment">//&#x672C;&#x5730;&#x670D;&#x52A1;&#x5668;&#x6240;&#x52A0;&#x8F7D;&#x7684;&#x9875;&#x9762;&#x6240;&#x5728;&#x7684;&#x76EE;&#x5F55;</span></span><br><span class="line">    port: <span class="number">8023</span>, <span class="comment">//&#x8BBE;&#x7F6E;&#x7AEF;&#x53E3;&#x53F7;&#xFF0C;&#x9ED8;&#x8BA4;8080</span></span><br><span class="line">    colors:<span class="literal">true</span>, <span class="comment">//&#x7EC8;&#x7AEF;&#x4E2D;&#x8F93;&#x51FA;&#x7ED3;&#x679C;&#x4E3A;&#x5F69;&#x8272;</span></span><br><span class="line">    <span class="comment">// histtoryApiFallback: true, //&#x4E0D;&#x8DF3;&#x8F6C;</span></span><br><span class="line">    inline:<span class="literal">true</span>,<span class="comment">//&#x5B9E;&#x65F6;&#x5237;&#x65B0;</span></span><br><span class="line">  },</span><br><span class="line">  clearBeforeBuild: <span class="literal">true</span>,</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>&#x5F15;&#x5165;webpack-dev-server&#x540E;&#x7684;&#x914D;&#x7F6E;&#x9879;&#x3002;</p>
<p>&#x6700;&#x540E;&#x7684;webpack.config.js<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">&quot;webpack&quot;</span>),</span><br><span class="line">      path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>),</span><br><span class="line">      ExtractTextPlugin = <span class="built_in">require</span>(<span class="string">&apos;extract-text-webpack-plugin&apos;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//&#x6BCF;&#x5F53; &quot;react&quot; &#x5728;&#x4EE3;&#x7801;&#x4E2D;&#x88AB;&#x5F15;&#x5165;&#xFF0C;&#x5B83;&#x4F1A;&#x4F7F;&#x7528;&#x538B;&#x7F29;&#x540E;&#x7684; React JS &#x6587;&#x4EF6;&#xFF0C;&#x800C;&#x4E0D;&#x662F;&#x5230; node_modules &#x4E2D;&#x627E;&#x3002;</span></span><br><span class="line"><span class="comment">//&#x6BCF;&#x5F53; Webpack &#x5C1D;&#x8BD5;&#x53BB;&#x89E3;&#x6790;&#x90A3;&#x4E2A;&#x538B;&#x7F29;&#x540E;&#x7684;&#x6587;&#x4EF6;&#xFF0C;&#x6211;&#x4EEC;&#x963B;&#x6B62;&#x5B83;&#xFF0C;&#x56E0;&#x4E3A;&#x8FD9;&#x4E0D;&#x5FC5;&#x8981;&#x3002;</span></span><br><span class="line"><span class="keyword">const</span> node_modules = path.resolve(__dirname,<span class="string">&apos;node_modules&apos;</span>),</span><br><span class="line">      pathToReact = path.resolve(node_modules, <span class="string">&apos;react/dist/react.min.js&apos;</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = {</span><br><span class="line">  <span class="comment">// &#x201C;__dirname&#x201D;&#x662F;node.js&#x4E2D;&#x7684;&#x4E00;&#x4E2A;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#xFF0C;&#x5B83;&#x6307;&#x5411;&#x5F53;&#x524D;&#x6267;&#x884C;&#x811A;&#x672C;&#x6240;&#x5728;&#x7684;&#x76EE;&#x5F55;&#x3002;</span></span><br><span class="line">  <span class="comment">// entry: &apos;./app/main.js&apos;,</span></span><br><span class="line">  </span><br><span class="line">  entry:{<span class="attr">app</span>:[</span><br><span class="line">      <span class="string">&apos;webpack/hot/dev-server&apos;</span>,</span><br><span class="line">      <span class="string">&apos;webpack/hot/only-dev-server&apos;</span>,</span><br><span class="line">       __dirname + <span class="string">&apos;/app/main.js&apos;</span></span><br><span class="line">     ],</span><br><span class="line">      <span class="comment">// &#x5F53; React &#x4F5C;&#x4E3A;&#x4E00;&#x4E2A; node &#x6A21;&#x5757;&#x5B89;&#x88C5;&#x7684;&#x65F6;&#x5019;&#xFF0C;</span></span><br><span class="line">    <span class="comment">// &#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x6307;&#x5411;&#x5B83;&#xFF0C;&#x5C31;&#x6BD4;&#x5982; require(&apos;react&apos;)</span></span><br><span class="line">    vendors: [<span class="string">&apos;react&apos;</span>],</span><br><span class="line">    },</span><br><span class="line">  output: {</span><br><span class="line">    path: path.join(__dirname, <span class="string">&apos;/public&apos;</span>),</span><br><span class="line">    filename:<span class="string">&apos;[name].js&apos;</span>,  <span class="comment">//&#x8F93;&#x5165;&#x7684;js&#x8DDF;&#x8F93;&#x51FA;&#x7684;js&#x540C;&#x540D;&#xFF0C;&#xFF0C;[name]-[hash].js&#x8F93;&#x51FA;&#x7684;&#x662F;main-&#x4E00;&#x4E2A;&#x968F;&#x673A;&#x503C;&#xFF0C;</span></span><br><span class="line">  },</span><br><span class="line">  <span class="comment">// &#x7701;&#x7565;&#x540E;&#x7F00;,&#x5F53;&#x5F15;&#x5165;js&#x7684;&#x65F6;&#x5019;&#x53EF;&#x7701;&#x7565;&#xFF0C;&#xFF0C;import react from &apos;react&apos;;</span></span><br><span class="line">  resolve:{</span><br><span class="line">      extensions:[<span class="string">&apos;&apos;</span>,<span class="string">&apos;.js&apos;</span>,<span class="string">&apos;.jsx&apos;</span>,<span class="string">&apos;.json&apos;</span>, <span class="string">&apos;.css&apos;</span>]</span><br><span class="line">  },</span><br><span class="line"></span><br><span class="line">  <span class="built_in">module</span>: {</span><br><span class="line">    loaders: [</span><br><span class="line">      {</span><br><span class="line">        test:<span class="regexp">/\.js|jsx$/</span>,   </span><br><span class="line">        exclude:<span class="regexp">/node_modules/</span>,    <span class="comment">//&#x624B;&#x52A8;&#x6DFB;&#x52A0;&#x5FC5;&#x987B;&#x5904;&#x7406;&#x7684;&#x6587;&#x4EF6;&#xFF08;&#x6587;&#x4EF6;&#x5939;&#xFF09;&#x6216;&#x5C4F;&#x853D;&#x4E0D;&#x9700;&#x8981;&#x5904;&#x7406;&#x7684;&#x6587;&#x4EF6;&#xFF08;&#x6587;&#x4EF6;&#x5939;&#xFF09;</span></span><br><span class="line">        loaders: [<span class="string">&apos;react-hot&apos;</span>, <span class="string">&apos;babel&apos;</span>]</span><br><span class="line">        <span class="comment">// query:{   //&#x5C06;&#x5176;&#x5199;&#x5728;&#x4E86;.babelrc&#x91CC;&#x9762;</span></span><br><span class="line">        <span class="comment">//   presets:[&apos;es2015&apos;,&apos;react&apos;]  //&#x4E3A;loaders&#x63D0;&#x4F9B;&#x989D;&#x5916;&#x7684;&#x8BBE;&#x7F6E;&#x9009;&#x9879;</span></span><br><span class="line">        <span class="comment">// }</span></span><br><span class="line">      },</span><br><span class="line">      {</span><br><span class="line">        test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">        loader:ExtractTextPlugin.extract(<span class="string">&apos;style-loader?moudle&apos;</span>,<span class="string">&apos;css-loader?moudle&apos;</span>),   <span class="comment">//css-moudles  &#x5728;&#x7C7B;&#x540E;&#x9762;&#x968F;&#x673A;&#x52A0;&#x4E0A;&#x4E00;&#x6570;&#xFF0C;&#x4FDD;&#x8BC1;&#x4E0D;&#x91CD;&#x590D;,&#x8FD9;&#x6837;&#x5199;&apos;style!css!less&apos;&#x4F1A;&#x51FA;&#x9519;&#xFF0C;&#xFF0C;&#xFF0C;</span></span><br><span class="line">      },</span><br><span class="line">      {</span><br><span class="line">        test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        loader: ExtractTextPlugin.extract(<span class="string">&apos;style-loader?moudle&apos;</span>,<span class="string">&apos;css-loader?moudle&apos;</span>,<span class="string">&apos;less-loader?moudles&apos;</span>),</span><br><span class="line">      },</span><br><span class="line">      {</span><br><span class="line">        test: <span class="regexp">/\.scss$/</span>,</span><br><span class="line">        loader: <span class="string">&apos;style!css!scss&apos;</span></span><br><span class="line">      },</span><br><span class="line">      {<span class="attr">test</span>: <span class="regexp">/\.(jpg|png)$/</span>, <span class="attr">loader</span>: <span class="string">&quot;file-loader?name=[hash:8].[name].[ext]&quot;</span>},</span><br><span class="line">      <span class="comment">// &#x4E0D;&#x5927;&#x4E0E;25kb&#x7684;&#x65F6;&#x5019;</span></span><br><span class="line">      <span class="comment">// {</span></span><br><span class="line">      <span class="comment">//   test: /\.(png|jpg)$/,</span></span><br><span class="line">      <span class="comment">//   loader: &apos;url?limit=25000&apos;</span></span><br><span class="line">      <span class="comment">// }</span></span><br><span class="line">    ],</span><br><span class="line">    noParse: [pathToReact],</span><br><span class="line">  },</span><br><span class="line"></span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="comment">// &#x70ED;&#x52A0;&#x8F7D;&#x63D2;&#x4EF6;</span></span><br><span class="line">    <span class="keyword">new</span> webpack.HotModuleReplacementPlugin(),</span><br><span class="line">    <span class="keyword">new</span> webpack.BannerPlugin(<span class="string">&quot;this is create by dony&quot;</span>),  <span class="comment">//js&#x4E0A;&#x9762;&#x6DFB;&#x52A0;&#x6CE8;&#x91CA;&#x7684;&#x63D2;&#x4EF6;</span></span><br><span class="line">    <span class="comment">// new webpack.optimize.UglifyJsPlugin(</span></span><br><span class="line">      compress: {</span><br><span class="line">            warnings: <span class="literal">false</span></span><br><span class="line">        },</span><br><span class="line">      ),   <span class="comment">//&#x538B;&#x7F29;&#x4EE3;&#x7801;</span></span><br><span class="line">    <span class="keyword">new</span> ExtractTextPlugin(<span class="string">&quot;style.css&quot;</span>),<span class="comment">//&#x6837;&#x5F0F;&#x4E0E;js&#x5206;&#x79BB;</span></span><br><span class="line">    <span class="keyword">new</span> webpack.optimize.CommonsChunkPlugin(<span class="string">&apos;vendors&apos;</span>, <span class="string">&apos;vendors.js&apos;</span>),</span><br><span class="line">  ],</span><br><span class="line"></span><br><span class="line">  devServer: {</span><br><span class="line">    contentBase: __dirname + <span class="string">&quot;/public&quot;</span>,<span class="comment">//&#x672C;&#x5730;&#x670D;&#x52A1;&#x5668;&#x6240;&#x52A0;&#x8F7D;&#x7684;&#x9875;&#x9762;&#x6240;&#x5728;&#x7684;&#x76EE;&#x5F55;</span></span><br><span class="line">    port: <span class="number">8023</span>, <span class="comment">//&#x8BBE;&#x7F6E;&#x7AEF;&#x53E3;&#x53F7;&#xFF0C;&#x9ED8;&#x8BA4;8080</span></span><br><span class="line">    colors:<span class="literal">true</span>, <span class="comment">//&#x7EC8;&#x7AEF;&#x4E2D;&#x8F93;&#x51FA;&#x7ED3;&#x679C;&#x4E3A;&#x5F69;&#x8272;</span></span><br><span class="line">    <span class="comment">// histtoryApiFallback: true, //&#x4E0D;&#x8DF3;&#x8F6C;</span></span><br><span class="line">    inline:<span class="literal">true</span>,<span class="comment">//&#x5B9E;&#x65F6;&#x5237;&#x65B0;</span></span><br><span class="line">  },</span><br><span class="line">  clearBeforeBuild: <span class="literal">true</span>,</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p>&#x5F15;&#x5165;atool-build&#x540E;&#xFF0C;&#x5982;&#x679C;&#x60F3;&#x6269;&#x5C55;webpack(&#x9879;&#x76EE;&#x4E2D;&#x7684;&#x5B9E;&#x5B9E;&#x5728;&#x5728;&#x7684;&#x4F8B;&#x5B50;),<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span>(<span class="params">webpackConfig</span>) </span>{</span><br><span class="line">  webpackConfig.babel.plugins.push(<span class="string">&apos;transform-runtime&apos;</span>);</span><br><span class="line">  webpackConfig.babel.plugins.push([<span class="string">&apos;antd&apos;</span>, {</span><br><span class="line">    style: <span class="string">&apos;css&apos;</span>, <span class="comment">// if true, use less</span></span><br><span class="line">  }]);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// Enable this if you have to support IE8.</span></span><br><span class="line">  webpackConfig.module.loaders.unshift({</span><br><span class="line">    test: <span class="regexp">/\.jsx?$/</span>,</span><br><span class="line">    loader: <span class="string">&apos;es3ify-loader&apos;</span>,</span><br><span class="line">  });</span><br><span class="line"></span><br><span class="line">  webpackConfig.module.loaders.push({ </span><br><span class="line">    test: <span class="regexp">/\.(eot|ttf|svg|woff)\?[^v]*$/</span>, </span><br><span class="line">    loader: <span class="string">&apos;url-loader?limit=10000&apos;</span></span><br><span class="line">  });</span><br></pre></td></tr></table></figure></p>
<p>&#x63D2;&#x4EF6;&#x6216;&#x8005;moudel&#x53EF;&#x4EE5;&#x7528;push&#x7684;&#x65B9;&#x6CD5;&#x3002;&#x5BF9;&#x4E8E;&#x4F7F;&#x7528;vendor&#xFF0C;&#x56E0;&#x4E3A;atool-build&#x5DF2;&#x7ECF;&#x5185;&#x7F6E;&#x4E86;&#x4E00;&#x4E2A;common.js,&#x6211;&#x4EEC;&#x60F3;&#x6539;&#x53D8;&#x7684;&#x8BDD;&#x53EF;&#x53C2;&#x8003;<a href="http://ant-tool.github.io/spm-to-atool-build.html#spmvendor" target="_blank" rel="noopener">spm atoo-build</a></p>

      
    </div>
    
  </div>
  
    
    <div class="copyright">
        <p><span>本文标题:</span><a href="/2016/08/24/webpack的基本用法/">webpack基础</a></p>
        <p><span>文章作者:</span><a href="/" title="访问 donyyang 的个人博客">donyyang</a></p>
        <p><span>发布时间:</span>2016年08月24日 - 16时41分</p>
        <p><span>最后更新:</span>2016年08月25日 - 23时47分</p>
        <p>
            <span>原始链接:</span><a class="post-url" href="/2016/08/24/webpack的基本用法/" title="webpack基础">http://yoursite.com/2016/08/24/webpack的基本用法/</a>
            <span class="copy-path" data-clipboard-text="原文: http://yoursite.com/2016/08/24/webpack的基本用法/　　作者: donyyang" title="点击复制文章链接"><i class="fa fa-clipboard"></i></span>
            <script src="/js/clipboard.min.js"></script>
            <script> var clipboard = new Clipboard('.copy-path'); </script>
        </p>
        <p>
            <span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" title="中国大陆 (CC BY-NC-SA 3.0 CN)" target = "_blank">"署名-非商用-相同方式共享 3.0"</a> 转载请保留原文链接及作者。
        </p>
    </div>



    <nav id="article-nav">
        
            <div id="article-nav-newer" class="article-nav-title">
                <a href="/2016/09/16/作用域链、闭包及其它/">
                    作用域链、闭包及其它
                </a>
            </div>
        
        
            <div id="article-nav-older" class="article-nav-title">
                <a href="/2016/08/13/上传到github上/">
                    将本的的文件上传到github上
                </a>
            </div>
        
    </nav>

  
</article>

    <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录</strong>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#跟webpack分不开的package-json。当安装各种npm-依赖包的时候会有两种写法"><span class="toc-number">1.</span> <span class="toc-text">跟webpack分不开的package.json。当安装各种npm 依赖包的时候会有两种写法:</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#entry中填入需要打包的js-文件，可指定多个文件"><span class="toc-number">2.</span> <span class="toc-text">entry中填入需要打包的js 文件，可指定多个文件.</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#output中是打包后输出的js文件，也是主页面中所依赖的js文件。"><span class="toc-number">3.</span> <span class="toc-text">output中是打包后输出的js文件，也是主页面中所依赖的js文件。</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#resolve-省略后缀-当引入js的时候可省略，，import-react-from-‘react’"><span class="toc-number">4.</span> <span class="toc-text">resolve 省略后缀,当引入js的时候可省略，，import react from ‘react’;</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#module-加载器配置，因为webpack-本身只支持对js进行处理。对其他文件进行处理就在加载器中进行配置"><span class="toc-number">5.</span> <span class="toc-text">module 加载器配置，因为webpack 本身只支持对js进行处理。对其他文件进行处理就在加载器中进行配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#plugins-插件项"><span class="toc-number">6.</span> <span class="toc-text">plugins 插件项</span></a></li></ol>
</div>
<style>
    .left-col .switch-btn {
        display: none;
    }
    .left-col .switch-area {
        display: none;
    }
</style>

<input type="button" id="tocButton" value="隐藏目录"  title="点击按钮隐藏或者显示文章目录">
<script>
    var valueHide = "隐藏目录";
    var valueShow = "显示目录";

    if ($(".left-col").is(":hidden")) {
        $("#tocButton").attr("value", valueShow);
    }

    $("#tocButton").click(function() {
        if ($("#toc").is(":hidden")) {
            $("#tocButton").attr("value", valueHide);
            $("#toc").slideDown(320);
            $(".switch-btn, .switch-area").fadeOut(300);
        }
        else {
            $("#tocButton").attr("value", valueShow);
            $("#toc").slideUp(350);
            $(".switch-btn, .switch-area").fadeIn(500);
        }
    })

    if ($(".toc").length < 1) {
        $("#toc, #tocButton").hide();
        $(".switch-btn, .switch-area").show();
    }
</script>




    <div class="share">
    <div class="bdsharebuttonbox">
    <a href="#" class="bds_more" data-cmd="more"></a>
    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
    <a href="#" class="bds_sqq" data-cmd="sqq" title="分享给 QQ 好友"></a>
    <a href="#" class="bds_copy" data-cmd="copy" title="复制网址"></a>
    <a href="#" class="bds_mail" data-cmd="mail" title="通过邮件分享"></a>
    <a href="#" class="bds_weixin" data-cmd="weixin" title="生成文章二维码"></a>
    </div>
    <script>
        window._bd_share_config={
            "common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
    </script>
</div>



    
      <div class="duoshuo" id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="2016/08/24/webpack的基本用法/" data-title="webpack基础" data-url="http://yoursite.com/2016/08/24/webpack的基本用法/"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:"dony"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
    <!-- 多说公共JS代码 end -->
</div>

    




    <div class="scroll" id="post-nav-button">
        
            <a href="/2016/09/16/作用域链、闭包及其它/" title="上一篇: 作用域链、闭包及其它">
                <i class="fa fa-angle-left"></i>
            </a>
        

        <a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>

        
            <a href="/2016/08/13/上传到github上/" title="下一篇: 将本的的文件上传到github上">
                <i class="fa fa-angle-right"></i>
            </a>
        
    </div>

    <ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2016/10/12/微信小程序/">微信小程序</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/09/16/作用域链、闭包及其它/">作用域链、闭包及其它</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/08/24/webpack的基本用法/">webpack基础</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/08/13/上传到github上/">将本的的文件上传到github上</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/03/17/hello-world/">Hello World</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/03/17/my-first-blog/">my first blog</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/03/17/js-3种排序算法/">js-3种排序算法</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/03/17/em的用法/">em的用法</a></li></ul>




    <script>
        
    </script>
</div>
      <footer id="footer">
    <div class="outer">
        <div id="footer-info">
            <div class="footer-left">
                &copy; 2018 donyyang
            </div>
            <div class="footer-right">
                <a href="http://hexo.io/" target="_blank" title="快速、简洁且高效的静态博客框架">Hexo</a>  Theme <a href="https://github.com/MOxFIVE/hexo-theme-yelee" target="_blank" title="简而不减双栏 Hexo 博客主题">Yelee</a> by MOxFIVE
            </div>
        </div>
        
            <div class="visit">
                
                    <span id="busuanzi_container_site_pv" style='display:none'>
                        <span id="site-visit" >本站到访数: 
                            <span id="busuanzi_value_site_uv"></span>
                        </span>
                    </span>
                
                
                    <span>, </span>
                
                
                    <span id="busuanzi_container_page_pv" style='display:none'>
                        <span id="page-visit">本页阅读量: 
                            <span id="busuanzi_value_page_pv"></span>
                        </span>
                    </span>
                
            </div>
        
    </div>
</footer>
    </div>
    
<script data-main="/js/main.js" src="//cdn.bootcss.com/require.js/2.1.22/require.min.js"></script>

    <script>
        $(document).ready(function() {
            var iPad = window.navigator.userAgent.indexOf('iPad');
            if (iPad > -1 || $(".left-col").css("display") === "none") {
                var bgColorList = ["#9db3f4", "#414141", "#e5a859", "#f5dfc6", "#c084a0", "#847e72", "#cd8390", "#996731"];
                var bgColor = Math.ceil(Math.random() * (bgColorList.length - 1));
                $("body").css({"background-color": bgColorList[bgColor], "background-size": "cover"});
            }
            else {
                var backgroundnum = 5;
                var backgroundimg = "url(/background/bg-x.jpg)".replace(/x/gi, Math.ceil(Math.random() * backgroundnum));
                $("body").css({"background": backgroundimg, "background-attachment": "fixed", "background-size": "cover"});
            }
        })
    </script>




<div class="scroll" id="scroll">
    <a href="#" title="返回顶部"><i class="fa fa-arrow-up"></i></a>
    <a href="#comments" title="查看评论"><i class="fa fa-comments-o"></i></a>
    <a href="#footer" title="转到底部"><i class="fa fa-arrow-down"></i></a>
</div>

    <script src="//cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
  </div>
</body>
</html>